<template>
    <div class="login m-flex --m-ai-center" @click="onOpenDialog">
        <span>登录</span>
        <span>|</span>
        <span>注册</span>
    </div>
    <m-dialog v-if="isDialogShow" v-model="isDialogShow" @onConfirm="onConfirm" @onCancel="onCancel">
        <template #title>
            <div>登录/注册</div>
        </template>
        <div class="content --m-p20">
            <div class="m-form">
                <div class="m-form-item">
                    <m-input placeholder="请输入用户名" v-model="form.username"></m-input>
                </div>
                <div class="m-form-item">
                    <m-input placeholder="请输入密码" v-model="form.password"></m-input>
                </div>
                <div class="m-form-item">
                    <m-input placeholder="请输入邮箱" v-model="form.email"></m-input>
                </div>
            </div>
            <div class="login-ways m-flex --m-ai-center">
                <svg-icon name="github" size="2" className="m-pointer-cursor"></svg-icon>
                <svg-icon name="wechat" size="2" className="m-pointer-cursor"></svg-icon>
                <svg-icon name="qq" size="2" className="m-pointer-cursor"></svg-icon>
            </div>
        </div>
        <template #action>
            <div class="action --m-w100 m-flex --m-jc-center">
                <m-button class="m-btn" type="primary" @click="onConfirm" text="登录"></m-button>
                <m-button class="m-btn" type="primary" @click="onRegister" text="注册"></m-button>
            </div>
        </template>
    </m-dialog>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/store';
import { ref } from 'vue';
const form = {
    username: '',
    password: '',
    email: '',
}

const isDialogShow = ref(false);
const onOpenDialog = () => {
    isDialogShow.value = !isDialogShow.value;
}
const onConfirm = () => useUserStore()._login(form);
const onRegister = () => useUserStore()._register(form);
const onCancel = () => {
    isDialogShow.value = false;
}
</script>

<style lang="less" scoped>
.login-ways {
    margin-top: 20px;
    display: flex;
    justify-content: end;

    .svg-icon {
        margin-left: 20px;
    }
}
</style>